<template>
    <div class="demo">
        <h2>Vue Router Demo</h2>
        <div class="content">
            <div class="left-content">
                <!-- 
                <a>Home</a>
                <a>About</a> 
                router-link 会自动转化为a标签
                -->

                <router-link active-class="active" to="/Home">Home</router-link>
                <router-link active-class="active" to="/About">About</router-link>
                
            </div>
            <div class="right-content">
                <router-view></router-view>
            </div>
        </div>

        
    </div>
</template>
<script>

    export default {
        name:'App',
    }
</script>
<style scoped>
    a{
        display: block;
        border: 1px solid #ddd;
        width: 200px;
        height: 50px;
        text-indent: 20px;
        line-height: 50px;
        text-decoration: none;
        color: black;
    }
    .demo{
        width: 800px;
        height: auto;
        margin: 0 auto;
    }

    a:hover, a:focus{
        background-color: rgb(36, 133, 197);
    }

    .content{
        overflow: auto; /* 清除浮动 */
    }

    .left-content{
        float: left;
        width: 30%;
    }

    .right-content{
        float: right;
        width: 70%;
    }


</style>